<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn-add" size="mini" type="primary">添加权限</el-button>
      <!-- 当前节点数据 :data="PermissionList" -->
      <el-table :data="PermissionList" row-key="id" default-expand-all>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button v-if="row.type == 1" size="mini" type="text" @click="onDialog(row.id)">添加</el-button>
            <el-button size="mini" type="text" @click="onEdit(row.id)">编辑</el-button>
            <el-popconfirm
              title="你确定要删除权限吗？"
              @onConfirm="delPermission(row.id)"
            >
              <el-button slot="reference" class="delBtn" size="mini" type="text">删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
      <permissionDialog :id.sync="id" :dialog-form-visible.sync="dialogFormVisible" :pid.sync="pid" @updatePermissionDialog="render" />
    </div>
    <!-- 添加弹窗 -->
  </div>
</template>
<script>
import permissionDialog from './components/permission-dialog'
import { delSysPermission, getSysPermission } from '@/api/permission/permission'
import { listTree } from '@/utils/index'
export default {
  name: 'PermissionPage',
  components: { permissionDialog },
  data() {
    return {
      PermissionList: [],
      dialogFormVisible: false,
      // 往dialog组件传pid
      pid: '',
      id: ''
    }
  },
  async mounted() {
    await this.render()
  },
  methods: {
    async render() {
      this.PermissionList = await getSysPermission()
      this.PermissionList = listTree(this.PermissionList, 0)
    },
    onDialog(pid) {
      this.dialogFormVisible = true
      this.pid = pid
    },
    onEdit(id) {
      this.dialogFormVisible = true
      this.id = id
    },
    async delPermission(id) {
      try {
        await delSysPermission(id)
        this.$message.success('删除成功')
        await this.render()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style>
.btn-add {
  margin: 10px;
}
.delBtn {
  margin-left: 10px;
}
</style>
